<!DOCTYPE html>
<html ng-app='directoryApp'>
  <head>
    <title>My School Directory</title>
    <link rel='stylesheet' href='/bootstrap/css/bootstrap.css'>
    <link rel='stylesheet' href='/app/css/app.css'>
    <!-- load angular in head section to ensure ngCloak CSS is loaded -->
    <script src='/app/lib/angular/angular.js'></script>
  </head>
  <body ng-cloak ng-controller='PageController'>

    <div class='wrap container'>

      <div class='row pagination-right'>
        <span class='span12' ng-show='email'>{{email}}</button>
      </div>

      <div class="page-header">
        <h1>My School Directory <small>A better way to connect</small></h1>
      </div>

      <div ng-show='fatal_error' class='alert alert-block alert-error'>

        <a class="close" data-dismiss="alert" href="#">&times;</a>

        <div class='row'>
          <div class='span12'>
            <h2>Ah snap!</h2>
            <p>This application has experienced an unexpected problem.
               Please try to reload this page now, or try again in a few minutes.</p>
            <button class='btn btn-danger' ng-click='reload()'>reload now</button>
          </div>
        </div>

        <div class='row'>
          <div class='span12'>
            <br/>
            <strong>Error details:</strong>
          </div>
        </div>

        <pre class='well'>{{fatal_error}}</pre>

      </div>

      <div class='row' ng-show='progress_percent < 100'>
        <div>{{progress_msg}}</div>
        <div class='progress progress-striped active'>
          <div class='bar' style='width: {{progress_percent}}%;'></div>
        </div>
      </div>

      <div class='hero-unit' ng-show='authfail && !email'>
        <h1>Sign in required</h1>
        <p>Please sign in to access the {{school}} directory.</p>
        <p>
          <a class='btn btn-primary btn-large' ng-click='signin()'>
            Sign In
          </a>
        </p>
      </div>

      <div id='main' ng-show='email'>
        <div ng-view></div>
      </div>

      <div class='push'>
      </div>

    </div>

    <div class='footer container'>

      <div class='row muted'>
        <div class='span8'>
          <span>version 0.9</span>
        </div>

        <div class='span4 pagination-right adminlinks'>
          <span>git(<a class='link' href='https://code.google.com/p/myschooldirectory/' target='_blank'>myschooldirectory</a>)</span>

          <span ng-show='config.is_admin'>danger(<span class='link' ng-click='big_red_button()'>big-red-button</span>)</span>

          <span ng-show='config.is_admin'>admin(<span class='link' ng-click='datastore_admin()' target='_blank'>datastore</span>,
                                                <span class='link' ng-click='memcache_admin()' target='_blank'>memcache</span>)</span>

        </div>

      </div>

    </div>

    <script src='/bootstrap/js/jquery.js'></script>
    <script src='/bootstrap/js/bootstrap.js'></script>
    <script src='/app/js/services.js'></script>
    <script src='/app/js/filters.js'></script>
    <script src='/app/js/directives.js'></script>
    <script src='/app/js/controllers.js'></script>
    <script src='/app/js/app.js'></script>
<script>
function init() {
  window.gapi_ready();
}
</script>
    <script src='https://apis.google.com/js/client.js?onload=init'></script>
  </body>
</html>
